{% extends "data_edit.html" %}
{% load i18n %}
{% block form %}
{% autoescape off %}
    <tr>
        {{form.comb_no|field_as_td_h}}
        <td>{{form.comb_no.errors }}</td>
    </tr>
    <tr>
        {{form.comb_name|field_as_td_h}}
        <td>{{form.comb_name.errors }}</td>
    </tr>
    <tr>
        {{form.door|field_as_td_h}}
        <td>{{form.door.errors }}</td>
    </tr>
    <tr>
        <th>{% trans '组合验证' %}:</th>
        <td>
            <div id="id_combined" style="border: 1px dotted #7ac142;padding:8px;color: #FF9966;">
                <table>
                    <tbody>
                        <tr>
                            {{form.group_one|field_as_td_h}}
                            <td>{{ form.count_one }}</td>
                            <td><div>(<span id="g0">0</span>)</div></td>
                        </tr>
                        <tr>
                            {{form.group_two|field_as_td_h}}
                            <td>{{ form.count_two }}</td>
                            <td><div>(<span id="g1">0</span>)</div></td>
                        </tr>
                        <tr>
                            {{form.group_three|field_as_td_h}}
                            <td>{{ form.count_three }}</td>
                            <td><div>(<span id="g2">0</span>)</div></td>
                        </tr>
                        <tr>
                            {{form.group_four|field_as_td_h}}
                            <td>{{ form.count_four }}</td>
                            <td><div>(<span id="g3">0</span>)</div></td>
                        </tr>
                        <tr>
                            {{form.group_five|field_as_td_h}}
                            <td>{{ form.count_five }}</td>
                            <td><div>(<span id="g4">0</span>)</div></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </td>
    </tr>
{% for i,k in form.errors.items %}
    {{i}}{{k}}
{% endfor %}
{% endautoescape %}
{% endblock %}
{% block addjs %}
    var refresh_options = function(obj, count){
        $("#"+obj).find('option').each(
            function(index, option){
                if($(option).val() > count){
                    $(option).attr('disabled', 'disabled');
                }else{
                    $(option).removeAttr('disabled');
                }
            }
        );
    };
    $("select[name*='group_']").click(function(){
        var door = $("#id_edit_form").find("input[name='door']").val();
        if(!door){
            alert('Please the door first.');
        }
    });
    $("#id_combined").find('select[name*="group_"]').each(
        function(index, select){
            var count = this.id.replace('group', 'count');
            refresh_options(count, 0)
            $(this).change(function(){
                var door = $("#id_edit_form").find("input[name='door']").val();
                $.ajax({
                    url: "/access/group_person/",
                    type: "GET",
                    dataType: "json",
                    data:{"group": $(this).val(), "door": door},
                    success: function(callback){
                        var person_count = callback.count
                        refresh_options(count, person_count)
                        $("#g"+index).html(person_count)
                    },
                    error: function(a, b, c){

                    }
                });
            })
            $(this).change();
        }
    );
{% endblock %}